<template>
  <main-card
    :title="`${detailData.projectName || ''}`"
    :crumbs="crumbs"
    :loading="getDictionLoading"
    :screen-style-obj="computedScreenStyleObj"
    :main-body-style-obj="{ paddingBottom: 0 }"
  >
    <template #tool-btn> </template>
    <template #subheading>
      <div class="details-title w">
        <div class="label-group">
          <div v-for="(item, index) in detailData.projectLabelInfoVOS" :key="index" class="base-label label-text" :title="item.labelName">
            {{ item.labelName }}
          </div>
        </div>
        <collect-button
          msg="是否取消收藏此项目？"
          :show-default-text="true"
          :default-status="detailData?.favorite"
          :favorite-obj-type="2"
          :favorite-obj-name="detailData?.projectName"
          :favorite-obj-id="detailData?.id"
          @on-click="setCollect"
        />

        <div class="head-down">
          {{ detailData.description }}
        </div>
      </div>
    </template>
    <div class="tabs"><switch-tabs :tabs="tabs" :selected-tab="selectedTab" @switchTab="switchTab" /></div>

    <div class="detail-content">
      <component :is="compMap[selectedTab]" :prop-value="detailData" />
    </div>
  </main-card>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import CollectButton from '@/components/CollectButton/index.vue'
  import MainCard from '@/components/MainCard/index.vue'
  import SwitchTabs from '@/components/SwitchTabs/index.vue'
  import { itemCaseApi } from '@/services/api'

  import { DetailType } from '../types'
  import DataSet from './components/DataSet.vue'
  import OnlineExperience from './components/OnlineExperience/index.vue'
  import ProjectIntroduction from './components/ProjectIntroduction.vue'
  import SourceCode from './components/SourceCode.vue'

  interface Tab {
    name: string
    key: string
  }
  const compMap: { [key in string]: any } = {
    projectIntroduction: ProjectIntroduction,
    onlineExperience: OnlineExperience,
    dataSet: DataSet,
    sourceCode: SourceCode
  }
  const route = useRoute()
  const { id } = route.params as { id: string }
  const crumbs = computed(() => {
    return [{ path: '/item-case/list', name: `项目案例` }, { name: `${detailData.value.projectName || ''}` }]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })

  const setCollect = () => {
    // 此处调用搜藏接口
    console.log('setCollect')
  }

  const tabs = ref<Tab[]>([])
  let selectedTab = ref<string>('') // 默认选中第一个 tab
  const switchTab = (key: string) => {
    selectedTab.value = key
  }
  const detailData = ref<DetailType>({})

  /*----------------------------------------- 详情 --------------------------------*/
  const { loading: getDictionLoading, runAsync: getDetail } = useRequest<ResponseData<DetailType>>(
    (id: string) => itemCaseApi.detail(id)(),
    {
      onSuccess: ({ data }) => {
        if (data.onlineExperience) {
          tabs.value = [
            {
              name: '项目介绍',
              key: 'projectIntroduction'
            },
            {
              name: '在线体验',
              key: 'onlineExperience'
            },
            {
              name: '数据集',
              key: 'dataSet'
            },
            {
              name: '源代码',
              key: 'sourceCode'
            }
          ]
        } else {
          tabs.value = [
            {
              name: '项目介绍',
              key: 'projectIntroduction'
            },
            {
              name: '数据集',
              key: 'dataSet'
            },
            {
              name: '源代码',
              key: 'sourceCode'
            }
          ]
        }
        console.log(data, 'getDetail111', tabs)
        selectedTab.value = tabs.value[0].key
        Object.assign(detailData.value, data)
      }
    }
  )

  getDetail(id)
</script>

<style lang="less" scoped>
  .details-title {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    gap: 8px;

    .label-group {
      display: flex;
      align-items: flex-start;
      margin-top: 8px;
      max-width: 80%;
      flex-wrap: wrap;
      gap: 6px;
    }

    .head-down {
      max-width: 100%;
      font-size: 14px;
      color: rgba(25, 25, 48, 0.75);
      line-height: 22px; /* 166.667% */
    }

    :deep(.collect-box) {
      position: absolute;
      top: -4px;
      right: 0;
    }
  }

  .tabs {
    padding: 12px 0 16px;
  }

  .detail-content {
    height: 100%;
  }

  .base-label {
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    background: #fff;
    border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    border-radius: 6px;
    gap: 6px;
  }

  .label-text {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 25px;
    font-size: 12px;
    color: #8599bf;
    line-height: 20px;
    word-break: keep-all;
  }

  .tooltip-label-text {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-text-color-3, rgba(17, 22, 31, 0.52));
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }
</style>
